<template>
  <div class="page">
    <div class="page-title">
      <div class="title">
        <component :is="slotRenderTitle" v-if="slotRenderTitle.has" />
      </div>
      <div class="title-suffix">
        <component :is="slotRenderSuffix" v-if="slotRenderSuffix.has" />
      </div>
    </div>
    <div class="page-content" :class="{ padding: props.padding }">
      <div v-resize="props.onResize" class="content" :class="props.contentClass">
        <slot />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { OnResize } from '@expresso/plus'
import type { StyleValue, VNodeChild } from 'vue'

//# 配置

defineOptions({ name: 'Page' })

//# 属性

const $props = withDefaults(
  defineProps<{
    class?: any
    contentClass?: any
    style?: StyleValue
    padding?: boolean
    title?: VNodeChild
    suffix?: VNodeChild

    onResize?: OnResize
  }>(),
  {
    padding: true,
  },
)
const { title: titleRef, suffix: suffixRef, ...propsRefs } = toRefs($props)
const props = refsToProps(propsRefs)

//# 插槽

const $slots = defineSlots<{
  default?: () => any
  title?: () => any
  suffix?: () => any
}>()

//# 成员

const route = useRoute()

const pageName = computed(() => route.meta?.title as any)

//// 插槽合并 ////

const slotRenderTitle = useSlotRender($slots, 'title', () => titleRef.value ?? pageName.value)
const slotRenderSuffix = useSlotRender($slots, 'suffix', suffixRef)
</script>

<style scoped lang="scss">
.page {
  height: 100%;
  width: 100%;
  overflow: hidden;

  --page-title-height: 48px;

  > .page-title {
    @include flex(space-between);
    padding: 0 18px;
    height: var(--page-title-height);
    background-color: #fff;
    border-bottom: 1px solid #cdd7e8;

    > .title {
      position: relative;
      height: 100%;
      @include flex(center);
      @include font(22px, 'bold', #36445b);

      &::after {
        @include after2block();
        position: absolute;
        bottom: -4px;
        height: 6px;
        width: 100%;
        background-color: #06c192;
      }
    }
  }

  > .page-content {
    color: #36445b;

    &.padding {
      padding: 12px 16px;

      > .content {
        width: 100%;
        height: 100%;
      }
    }

    height: calc(100% - var(--page-title-height));
    background-color: #eef0f3;
  }
}
</style>
